<template>
    <div class="view-container">
        <header class="w100p">
            头部
        </header>
        <div class="flexCol content-container">
            <div class="flexCol">
                <router-link :to="{path:'/login'}">登录页面跳转</router-link>
                <router-link :to="{path:'/child'}">子页面跳转</router-link>
                <router-link :to="{path:'/404'}">错误页面跳转</router-link>
                <router-link :to="{path:'/401'}">无权限页面跳转</router-link>
                <router-link :to="{path:'/cms/total'}">后台管理页面跳转</router-link>
            </div>
            <router-view></router-view>
        </div>
        <footer class="w100p">
            底部
        </footer>
    </div>
</template>
<script>
    export default {
        data(){
            return{
               
            }
        },
        created(){
           
        },
        methods:{
            
        }
    }
</script>
<style lang='scss' scoped>
.view-container{
    header{
        position: fixed;
        height: 60px;
        background: #fff;
        border-bottom: 1px solid #ddd;
    }
    .content-container{
        padding-top: 60px;
        height: 100vh;
    }
    footer{
        background: gray;
        height: 100px;
    }
}
</style>